import React, { Component } from 'react';
import '../css/InformationDetail.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import  axios from  'axios'
import  InformationComment from  './InformationComment'
@observer class InformationDetail extends Component {
    constructor(props) {
        super(props)
        this.state={
            data:'',
            comment:[],
            size:0,
            total:0,
            sum:0
        }
    }
    componentWillMount(){
        Mobx.history= this.props.history
    }
    componentDidMount(){
        axios.get('http://www.niuduxiu.com/pc/article/find/'+this.props.match.params.id+'.jhtml')
            .then((item)=>{
                this.setState({
                    data:item.data.data
                })
            })
        axios.get('http://www.niuduxiu.com/pc/articleComment/page/'+this.props.match.params.id+'.jhtml?pageSize=10&r='+Math.random())
            .then((item)=>{
                    this.setState({
                        size:item.data.data.pageNumber,
                        total:item.data.data.totalPages,
                        comment:item.data.data.content,
                        sum:item.data.data.total
                    })
            })
    }
    render() {
        return (
            <div className="InformationDetail">
                <div>
                    <p className='titleName shengluehao'>{this.state.data.title}</p>
                    <p className='kongbai'></p>
                    <div className='content'>
                        <p className='title shengluehao'>{this.state.data.title}</p>
                        <p className='zan'>
                            <img src={require('../img/zan.png')} alt=""/>
                            {this.state.data.hits}
                        </p>
                        <div className='fuwenben' dangerouslySetInnerHTML={{__html: this.state.data.content}}></div>
                    </div>
                    <InformationComment comment={this.state.comment} total={this.state.sum} />
                    <p className='commentInput'><input type="text" placeholder='自古二楼多人才'  /></p>
                </div>
            </div>
        );
    }
}

export default InformationDetail;
